import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeftOutlined } from '@ant-design/icons';
import styles from './Xue.module.css';

export default function Xue() {
  const navigate = useNavigate();

  return (
    <div className={styles.container}>
      {/* 头部导航 */}
      <div className={styles.header}>
        <button 
          onClick={() => navigate(-1)}
          className={styles.backButton}
        >
          <ArrowLeftOutlined style={{ marginRight: '5px' }} />
          返回
        </button>
        <h1 className={styles.title}>
          智绘师学习机
        </h1>
      </div>

      {/* 主要内容区域 */}
      <div className={styles.mainContent}>
        {/* 产品展示区域 */}
        <div className={styles.productDisplay}>
          {/* 产品图片 */}
          <div className={styles.imageContainer}>
            <img 
              src="/image/7.png" 
              alt="智绘师学习机" 
              className={styles.productImage}
            />
            <img src="/image/7.png" alt="" />
          </div>

          {/* 产品信息 */}
          <div className={styles.productInfo}>
            <h2 className={styles.productTitle}>
              智绘师智能学习机
            </h2>
            
            <p className={styles.productDescription}>
              专为儿童设计的学习设备，集成了丰富的教育资源，帮助孩子更好地学习和成长。
              采用先进的AI技术，提供个性化的学习体验。
            </p>

            {/* 产品特点 */}
            <div className={styles.featuresGrid}>
              <div className={styles.featureCard}>
                <div className={styles.featureIcon}>📚</div>
                <h3 className={styles.featureTitle}>丰富资源</h3>
                <p className={styles.featureText}>海量学习内容，覆盖各学科</p>
              </div>

              <div className={styles.featureCard}>
                <div className={styles.featureIcon}>🤖</div>
                <h3 className={styles.featureTitle}>AI智能</h3>
                <p className={styles.featureText}>智能推荐，个性化学习</p>
              </div>

              <div className={styles.featureCard}>
                <div className={styles.featureIcon}>👀</div>
                <h3 className={styles.featureTitle}>护眼设计</h3>
                <p className={styles.featureText}>专业护眼，健康学习</p>
              </div>
            </div>

            {/* 购买按钮 */}
             <div className={styles.buttonContainer}>
              <button className={styles.primaryButton}
              onMouseOver={(e) => {
                e.target.style.backgroundColor = '#40a9ff';
                e.target.style.transform = 'translateY(-2px)';
              }}
              onMouseOut={(e) => {
                e.target.style.backgroundColor = '#1890ff';
                e.target.style.transform = 'translateY(0)';
              }}
              >
                立即购买
              </button>
              
              <button className={styles.secondaryButton}
              onMouseOver={(e) => {
                e.target.style.backgroundColor = '#f0f8ff';
                e.target.style.transform = 'translateY(-2px)';
              }}
              onMouseOut={(e) => {
                e.target.style.backgroundColor = 'white';
                e.target.style.transform = 'translateY(0)';
              }}
              >
                了解更多
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
